<div class="visit-task page-content ">
	<form nz-form [formGroup]="validateForm" class="page-header">
		<div nz-row [nzGutter]="24">
			<div nz-col [nzSpan]="6">
				<nz-form-item>
					<nz-form-label nzFor="visitTitle">网格员类型</nz-form-label>
					<nz-form-control>
						<nz-select formControlName="griderType" nzPlaceHolder="请选择">
							<!-- <nz-option [nzLabel]="'专职网格长'" nzValue="1"></nz-option>
							<nz-option [nzLabel]="'网格员'" nzValue="2"></nz-option>
							<nz-option [nzLabel]="'微网格长'" nzValue="3"></nz-option> -->
							<nz-option [nzLabel]="grider" [nzValue]="i + 1" *ngFor="let grider of griderList; let i = index"></nz-option>
							
						</nz-select>
					</nz-form-control>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="6">
				<nz-form-item>
					<nz-form-label nzFor="name">姓名</nz-form-label>
					<nz-form-control>
						<input nz-input placeholder="请填写" formControlName="name" />
					</nz-form-control>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="6" *ngIf="griderTypeValue === 1 || griderTypeValue === 2">
				<nz-form-item>
					<nz-form-label nzFor="year">走访年份</nz-form-label>
					<nz-form-control>
						<nz-date-picker style="width: 100%;" nzMode="year" formControlName="year"></nz-date-picker>
					</nz-form-control>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="6" *ngIf="griderTypeValue === 3">
				<nz-form-item>
					<nz-form-label nzFor="visitTitle">走访月份</nz-form-label>
					<nz-form-control>
						<nz-date-picker style="width: 100%;" nzMode="month" formControlName="month"></nz-date-picker>
					</nz-form-control>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="6" [nzOffset]="!griderTypeValue ? 6 : 0">
				<nz-form-item style="float: right;">
					<button *ngIf="authList.includes(authEnum.VISIT_TASK_VIEW)" nz-button  style="margin-right: 10px;" (click)="onSearch(true)">
						<i nz-icon nzType="search"></i>
						搜索
					</button>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="6" *ngIf="griderTypeValue === 2">
				<nz-form-item>
					<nz-form-label nzFor="season">走访季度</nz-form-label>
					<nz-form-control>
						<nz-select formControlName="season" nzPlaceHolder="请选择" nzAllowClear>
							<nz-option [nzLabel]="'第一季度'" nzValue="1"></nz-option>
							<nz-option [nzLabel]="'第二季度'" nzValue="2"></nz-option>
							<nz-option [nzLabel]="'第三季度'" nzValue="3"></nz-option>
							<nz-option [nzLabel]="'第四季度'" nzValue="4"></nz-option>
						</nz-select>
					</nz-form-control>
				</nz-form-item>
			</div>
		</div>

	</form>


	<nz-table #basicTable [nzData]="data" [nzBordered]="true" [nzShowPagination]="false" nzSize="middle" [nzPageSize]="page.limit"
		[nzScroll]="{y: griderTypeValue === 2 ? 'calc(100vh - 190px - 41px)' : 'calc(100vh - 190px'}" [nzLoading]="nzLoading">
		<thead>
			<tr>
				<th nzAlign="center" nzWidth="100px">序号</th>
				<th nzAlign="center" nzWidth="auto">网格员</th>
				<th nzAlign="center" nzWidth="auto">已走访次数</th>
				<th nzAlign="center" nzWidth="auto">应走访总数</th>
				<th nzAlign="center" nzWidth="150px">操作</th>
			</tr>
		</thead>
		<tbody>
			<tr *ngFor="let item of basicTable.data; let i = index;">
				<td nzAlign="center">{{ i + 1}}</td>
				<td nzAlign="center">
					<a
					nz-popover
					nzPopoverTitle="网格员信息"
					nzPopoverTrigger="click"
					[nzPopoverContent]="contentTemplate"
					>{{item.name}}</a>
					<ng-template #contentTemplate>
						<div class="name-detail">
							<div class="name-detail-item">
								<span>姓名：</span>
								<span>{{item.name}}</span>
							</div>
							<div class="name-detail-item">
								<span>手机号码：</span>
								<span>{{item.contractNumber}}</span>
							</div>
							<div class="name-detail-item">
								<span>性别：</span>
								<span>{{item.gender=== 'M' ? '男' : '女'}}</span>
							</div>
							<div class="name-detail-item">
								<span>出生年月日：</span>
								<span>{{item.birthdate}}</span>
							</div>
						</div>
					</ng-template>
				</td>
				<td nzAlign="center">
					{{item.complete}}
				</td>
				<td nzAlign="center">
					{{item.total}}
				</td>
				<td nzAlign="center">
					<div class="menu-btn">
						<ng-container *ngIf="authList.includes(authEnum.VISIT_TASK_DETAIL)">
							<a (click)="detail(item)">详情</a>
						</ng-container>
						<nz-divider nzType="vertical" *ngIf="(item.complete * 1) && authList.includes(authEnum.VISIT_TASK_DETAIL) && authList.includes(authEnum.VISIT_TASK_EDIT)"></nz-divider>
						<ng-container *ngIf="authList.includes(authEnum.VISIT_TASK_EDIT)">
							<a (click)="remind(item)" *ngIf="(item.complete * 1)">提醒</a>
						</ng-container>
					</div>
				</td>
			</tr>
		</tbody>
	</nz-table>

	<div class="page-pagination">
		<span *ngIf="page.total">共{{page.total}}条数据</span>
		<nz-pagination [(nzPageIndex)]="page.page" [nzTotal]="page.total" nzShowQuickJumper nzShowSizeChanger
			[(nzPageSize)]="page.limit" (nzPageIndexChange)="onSearch()" (nzPageSizeChange)="onSearch(true)">
		</nz-pagination>
	</div>

</div>